<template>
	<a-layout>
		<a-layout-sider width="200" style="background: #fff">
			<a-menu mode="inline" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys"
				:style="{ height: '100%', borderRight: 0 }">
				<a-sub-menu key="sub1">
					<template #title>
						<span>
							<user-outlined />
							subnav22
						</span>
					</template>
					<a-menu-item key="1">option</a-menu-item>
					<a-menu-item key="2">option2</a-menu-item>
					<a-menu-item key="3">option3</a-menu-item>
					<a-menu-item key="4">option4</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="sub2">
					<template #title>
						<span>
							<laptop-outlined />
							subnav 2
						</span>
					</template>
					<a-menu-item key="5">option5</a-menu-item>
					<a-menu-item key="6">option6</a-menu-item>
					<a-menu-item key="7">option7</a-menu-item>
					<a-menu-item key="8">option8</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="sub3">
					<template #title>
						<span>
							<notification-outlined />
							subnav 3
						</span>
					</template>
					<a-menu-item key="9">option9</a-menu-item>
					<a-menu-item key="10">option10</a-menu-item>
					<a-menu-item key="11">option11</a-menu-item>
					<a-menu-item key="12">option12</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</a-layout-sider>
		<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
			{{ebooks}}

		</a-layout-content>
	</a-layout>
</template>

<script lang="ts">
	import {
		defineComponent,
		onMounted,ref,toRef,reactive
	} from 'vue';
	import axios from 'axios';

	export default defineComponent({
		name: 'Home',
		setup() {
			console.log("setup");
			const ebooks = ref();
			const ebooks1 = reactive({books:[]});
			onMounted(() => {
				console.log("mount");
				axios.get("http://localhost:8880/ebook/list?name=spring").then((respose) => {
					console.log(respose)
					const data = respose.data;
					ebooks.value=data.content
					ebooks1.books=data.content
				})
			})

			return {
				ebooks,
				ebooks2:toRef(ebooks1,"books")
			}
		}

	});
</script>
